<template>
  <div class="home">
    <a-layout style="height: 100%;">
      <a-layout-header>
        <h4 style="color: white">
          OS-monitor
        </h4>
      </a-layout-header>
      <a-layout-content style="height: 100%;">
        <a-table :columns="columns" :data-source="tableData" style="width: 100%">
          <template #cpu="{ record }">
            <a-progress
                :stroke-color="{ '0%': '#4eff01','100%': '#fc001b'}"
                :percent="record.get_cpu"
            />
          </template>
          <template #mem="{ record }">
            <a-progress
                :stroke-color="{ '0%': '#4eff01','100%': '#fc001b'}"
                :percent="record.get_mem"
            />
          </template>
          <template #net="{ record }">
            <div style="display: flex;justify-content: center;">
              <p style="line-height: 0">下载速度：{{ record.net.recv }} / KB</p>
            </div>
            <div style="display: flex;justify-content: center;margin-top: 5px">
              <p style="line-height: 0">上传速度：{{ record.net.sent }} / KB</p>
            </div>
          </template>
          <template #desk="{ record }">
            <a-popover placement="bottom">
              <template #title>
                <span>磁盘信息</span>
              </template>
              <template #content>
                <template v-for="(item,index) in record.desk" v-bind:key="index">
                  <div style="display: flex">
                    <div style="display: flex">
                      <span>盘符：{{ item.part }}</span>
                    </div>
                    <div style="display: flex;margin-left: 10px">
                      <span>已用：{{ item.used }} GB</span>
                    </div>
                    <div style="display: flex;margin-left: 10px">
                      <span>空闲：{{ item.free }} GB</span>
                    </div>
                  </div>
                </template>
              </template>
              <a href=";;javascript">磁盘信息</a>
            </a-popover>
          </template>
          <template #status="{ record }">
            <a-tag v-if="record.status === '已连接'" color="blue">已连接</a-tag>
            <a-tag v-else color="red">已断开</a-tag>
          </template>
        </a-table>
      </a-layout-content>
      <a-layout-footer>
        OS-monitor
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
// @ is an alias to /src

import {onMounted, ref} from "vue";

export default {
  name: 'Home',
  components: {},
  setup() {
    // const wsUrl = 'ws://39.105.54.33:8080/ws'
    const wsUrl = 'ws://10.0.0.121:8080/ws'

    const columns = ref([
      {
        title: 'Ip',
        dataIndex: 'ip',
        key: 'ip',
        align: 'center',
        width: "16%"
      }, {
        title: 'CPU',
        dataIndex: 'get_cpu',
        key: 'get_cpu',
        align: 'center',
        width: "16%",
        slots: {
          customRender: 'cpu'
        }
      }, {
        title: '内存',
        dataIndex: 'get_mem',
        key: 'get_mem',
        align: 'center',
        width: "16%",
        slots: {
          customRender: 'mem'
        }
      }, {
        title: '网速',
        dataIndex: 'net',
        key: 'net',
        align: 'center',
        width: "16%",
        slots: {
          customRender: 'net'
        }
      }, {
        title: '磁盘',
        dataIndex: 'desk',
        key: 'desk',
        align: 'center',
        width: "16%",
        slots: {
          customRender: 'desk'
        }
      }
      , {
        title: '活跃状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
        width: "16%",
        slots: {
          customRender: 'status'
        }
      }
    ])
    const tableData = ref([
      {
        key: '1',
        ip: "127.0.0.1",
        get_cpu: 0,
        get_mem: 0,
        net: {'sent': 0, 'recv': 0},
        desk: [],
        status: '已连接'
      }
    ])
    let socket = ''
    onMounted(() => {
      init()
    })
    let init = () => {
      socket = new WebSocket(wsUrl)
      socket.onopen = open
      socket.onmessage = message
      socket.onerror = error
      socket.onclose = close
    }

    let open = () => {
      console.log("连接成功")
    }

    let message = (res) => {
      tableData.value = []
      let data = JSON.parse(res.data)
      console.log(data)
      for (let i in data) {
        let res = data[i]
        let status = ""
        if (res['ClientStatus']) {
          // 获取磁盘列表信息
          let deskList = []
          for (let x = 0; x < res['DeskInfo'].length; x++) {
            let obj = {}
            obj['part'] = res['DeskInfo'][x].part
            obj['used'] = res['DeskInfo'][x].used
            obj['free'] = res['DeskInfo'][x].free
            deskList.push(obj)
          }
          status = '已连接'
          let obj = {
            key: i,
            ip: i,
            get_cpu: getCpuInfo(res['getCpu']),
            get_mem: memReat(res['getMem']['used'], res['getMem']['total']),
            net: {'sent': res['getNetSent'], 'recv': res['getNetRecv']},
            desk: deskList,
            status: status
          }
          tableData.value.push(obj)
        } else {
          status = '已断开'
          let obj = {
            key: i,
            ip: i,
            get_cpu: 0,
            get_mem: 0,
            net: {'sent': 0, 'recv': 0},
            desk: [],
            status: status
          }
          tableData.value.push(obj)
        }
        console.log(tableData.value)
      }
    }
    let error = (err) => {
      console.log("error is:", err)
    }

    let close = () => {
      console.log("关闭链接")
    }


    // const formNumToGb = (num) => {
    //   return (num / 1024 / 1024 / 1024).toFixed(2)
    // }
    const getCpuInfo = (num) => {
      return Number((num).toFixed(2))
    }
    const memReat = (used, total) => {
      let usedNum = Number((used / 1024 / 1024 / 1024).toFixed(2))
      let totalNum = Number((total / 1024 / 1024 / 1024).toFixed(2))
      return Number((usedNum / totalNum).toFixed(2) * 100)
    }

    return {
      columns,
      tableData
    }
  }
}
</script>
<style scoped>
.home {
  height: 100%;
}
</style>